<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Search, Plus, UserFilled, ArrowRight, ArrowDown } from '@element-plus/icons-vue'
import eleCollapse from '@/components/ele-collapse/index.vue'
import { log } from 'console';


const input = ref()
const imglist = ref([
    { url: '../../../src/assets/images/1.png' },
    { url: '../../../src/assets/images/2.png' },
    { url: '../../../src/assets/images/3.png' }
])

function PlusClick() {
    console.log('PlusClick');

}

const NewFriendList = ref([
    { url: '../../../src/assets/images/3.png', label: '王五', subabel: '简简单单：？？？', status: '1', time: '2024/10/10', isqun: false, },
])
const qunlist = ref([

    {
        url: '../../../src/assets/images/3.png', label: '济南Android开车群', subabel: '简简单单：？？？', time: '2024/10/10', isqun: true,
        qunList: [{ url: '../../../src/assets/images/1.png', label: '简简单单', subabel: 'becbb75cccce342b9a31b2cd70', time: '2024/10/10', isqun: false },
        { url: '../../../src/assets/images/2.png', label: '徐骚航-全世界最丑最骚最骚的', subabel: '[视频号]青空律师事务所法官咨询', time: '2024/10/10', isqun: false },
        { url: '../../../src/assets/images/3.png', label: '济南Android开车群', subabel: '简简单单：？？？', time: '2024/10/10', isqun: true, qunList: [] }]
    }
])

const contactlist = ref([
    { url: '../../../src/assets/images/1.png', label: '简简单单', subabel: 'becbb75cccce342b9a31b2cd70', time: '2024/10/10', isqun: false },
    { url: '../../../src/assets/images/2.png', label: '徐骚航-全世界最丑最骚最骚的', subabel: '[视频号]青空律师事务所法官咨询', time: '2024/10/10', isqun: false },
    { url: '../../../src/assets/images/3.png', label: '李思源', subabel: '简简单单：？？？', time: '2024/10/10', isqun: false, },
    { url: '../../../src/assets/images/3.png', label: '张三', subabel: '简简单单：？？？', time: '2024/10/10', isqun: false, },
    { url: '../../../src/assets/images/3.png', label: '李四', subabel: '简简单单：？？？', time: '2024/10/10', isqun: false, },
    { url: '../../../src/assets/images/3.png', label: '王五', subabel: '简简单单：？？？', time: '2024/10/10', isqun: false, },
])

const QYLXRlist = ref([
    { url: '../../../src/assets/images/qy.png', label: '北京小米', subabel: '简简单单：？？？', time: '2024/10/10', isqun: false, },
])
const GZhlist = ref([
    { url: '../../../src/assets/images/gzh.png', label: '奥克斯空调', subabel: '简简单单：？？？', time: '2024/10/10', isqun: false, },
])

// function itemClick(val: any) {
//     console.log(val);

//     // if (val == '') {

//     // }
// }
const isNewFriend = ref(false)
const isQun = ref(false)
const isGZh = ref(false)
const isQYLXR = ref(false)
const isContact = ref(true)






const isNewFriendFn = (val: boolean) => {
    isNewFriend.value = val
}
const isQunFn = (val: boolean) => {
    isQun.value = val
}
const isGZhFn = (val: boolean) => {
    isGZh.value = val
}
const isQYLXRFn = (val: boolean) => {
    isQYLXR.value = val
}

const isContactFn = (val: boolean) => {
    isContact.value = val
}

const newfriendClick = (val: any) => {
    console.log('新朋友',val);
    
}
const QunClick = (val: any) => {
    console.log('群',val);
    
}

const gzhClick = (val: any) => {
    console.log('公众号',val);
    
}

const qylxrClick = (val: any) => {
    console.log('企业',val);
    
}
const contactClick = (val: any) => {
    console.log('联系人',val);
    
}
</script>

<template>
    <div class="lay dreg">
        <div class="lay_left">
            <div class="seachBox">
                <!-- <div class="seachTop"></div> -->
                <el-input v-model="input" style="width: 85%;background-color: #eaeaea;color: #eee;" size="small"
                    placeholder="搜索" input-style="" :prefix-icon="Search" />
                <el-icon :size="20" title="添加朋友" style="background-color: #eaeaea;border-radius: 2px;padding: 2px;"
                    @click="PlusClick">
                    <Plus style="color: #000;"/>
                </el-icon>
            </div>

            <div class="sliderBox">
                <div style="padding: 10px;"> 
                    <div style="text-align: center;">
                        <el-button style="width: 100%;height: 42px;color: #000;font-weight: 800;" color="#ffffff"
                            :icon="UserFilled">通讯录管理</el-button>
                    </div>
                    <ele-collapse title="新的朋友" bgColor="#f6f6f6" fontSize="14" :num=" NewFriendList.length>0 ?NewFriendList.length:''" @isFlag="isNewFriendFn" />
                    <div class="ul" v-if="isNewFriend" v-for="(i, k) in NewFriendList" :key="k" @click="newfriendClick(i)">
                        <div style=" width: 19%;height: 45px; border: 1px solid #eee;border-radius: 2px;overflow: hidden;">
                            <img :src="i.url" alt="" style="height: 43px; border-radius: 5px;" />
                        </div>
                        <div style="display: flex;flex-direction: column;width:80%;padding-left: 5px;">
                            <span class="tlt">{{ i.label }}</span>
                            <span class="subtlt">{{ i.subabel }}</span>
                        </div>
                        <div style="position: absolute;top:-4;right: 0;">
                            <span style="font-size: 10px;color: #b9b9b9;">{{ i.status == '1' ? '已添加' : '添加' }}</span>
                        </div>
                    </div>
                    <ele-collapse title="群聊" bgColor="#f6f6f6" fontSize="14" :num="qunlist.length >0 ?qunlist.length:''" @isFlag="isQunFn" />
                    <div class="ul" v-if="isQun" >
                        <template v-for="(i, k) in qunlist" :key="k" >
                            <div  style=" width: 19%;height: 45px; border: 1px solid #eee;border-radius: 2px;overflow: hidden;" @click="QunClick(i)">
                                <div class="ulimg">
                                    <template v-for="(i, k) in imglist" :key="k">
                                        <el-image
                                            style="width: 17px; height: 17px;margin-right: 0.5px;margin-bottom: 0.5px;"
                                            :src="i.url" fit="cover" />
                                    </template>
                                </div>
                            </div>
                            <span class="tlt" @click="QunClick(i)">{{ i.label }}</span>
                        </template>
                    </div>
                    <ele-collapse title="公众号" bgColor="#f6f6f6" fontSize="14" :num="GZhlist.length>0 ?GZhlist.length:''" @isFlag="isGZhFn" />
                    <div v-if="isGZh" style="height: 100%;width: 100%;padding: 10px;" >
                        <div class="ul1" v-for="(i, k) in GZhlist" :key="k" @click="gzhClick(i)">
                            <img :src="i.url" alt="" style="height: 43px; border-radius: 5px;" />
                            <span class="tlt1">{{ i.label }}</span>
                        </div>
                    </div>
                    <ele-collapse title="企业微信联系人" bgColor="#f6f6f6" fontSize="14" :num="QYLXRlist.length>0 ?QYLXRlist.length:''" @isFlag="isQYLXRFn" />
                    <div v-if="isQYLXR" style="height: 100%;width: 100%;padding: 10px;">
                        <div class="ul1" v-for="(i, k) in QYLXRlist" :key="k" @click="qylxrClick(i)">
                            <img :src="i.url" alt="" style="height: 43px; border-radius: 5px;" />
                            <span class="tlt1">{{ i.label }}</span>
                        </div>
                    </div>
                    <ele-collapse title="联系人" bgColor="#f6f6f6" fontSize="14" :flag="isContact" :num="contactlist.length >0 ? contactlist.length:''"
                        @isFlag="isContactFn" />
                    <div v-if="isContact" style="height: 100%;width: 100%;padding: 10px;">
                        <div class="ul1" v-for="(i, k) in contactlist" :key="k" @click="contactClick(i)">
                            <img :src="i.url" alt="" style="height: 43px; border-radius: 5px;" />
                            <span class="tlt1">{{ i.label }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="lay_center">


        </div> -->
        <div class="lay_center">
            <div style="color: black;display: flex;justify-content: center;align-items: center;height: 100%;">
                <div>
                    <span class="icon iconfont icon-weixin1" style="font-size: 80px;color: #eaeaea;"></span>
                </div>
            </div>
        </div>
    </div>
</template>
<style src="./index.scss" scoped></style>
<style scoped></style>